<template>
  <el-form-item 
	v-if="attr != null"
	:prop="`attrs[${index}].prop`"
	:required="attr.required"
	:rules="attr.requiredMaps"
	>
      <template #label>
		  {{attr.name}}
		  <el-tooltip
	        v-if="attr.desc != null && attr.desc !=''"
	        placement="top-start"
	      >
	        <template #content> <div style="width:150px">{{attr.desc}}</div></template>
	        <el-icon style="margin-left: 5px">
				<Warning></Warning>
			</el-icon>
	      </el-tooltip>
	  </template>
	  <el-button v-if="attr.possible.length == 0 && attr.required == true" 
	  :type="attr.prop?'success':'info'" plain
	  :disabled ="save == false"
	  @click="clickHandle()">{{attr.prop?'已配置':'配置数据'}}</el-button>
      <el-input  v-if="attr.possible.length == 0 && attr.required == false" v-model="attr.prop" ></el-input>
      <el-select v-model="attr.prop" placeholder=""  v-if="attr.possible.length > 0">
        <el-option :label="possible" :value="possible" v-for="(possible, pIndex) in attr.possible" ></el-option>
      </el-select>
    </el-form-item>
</template>

<script>
module.exports = {
  name: "nodeAttr",
  props: {
	  nodeid: {
	      type: String,
	      default: function() {
	        return null
	      }
	  },
	  nodecode: {
	      type: String,
	      default: function() {
	        return null
	      }
	  },
	  nodeindex: {
	      type: Number,
	      default: function() {
	        return 0
	      }
	  },
	  nodeattr: {
	      type: Object,
	      default: function() {
	        return null
	      }
	  },
	  nodeattrs: {
	      type: Array,
	      default: function() {
	        return []
	      }
	  },
	  nodesave: {
	      type: Boolean,
	      default: function() {
	        return false
	      }
	  }
  },
  data() {
	if(!this.nodeattr.possible){
		this.nodeattr.possible = []
	}
    return {
      id: this.nodeid,
      code: this.nodecode,
      index: this.nodeindex,
      attr: this.nodeattr,
      attrs: this.nodeattrs,
      save: this.nodesave
    }
  },
	watch: {
      //'info' : {
	      //handler(val) {
			  
	      //},
	      //immediate: true, // 初次监听即执行
	      //deep: true
	    //}
    },
  methods: {
    clickHandle(){
    	this.$emit('attrconfig', this.id, this.code, this.attr.code, this.index)
    }
  },
  created() {
    
  }
}
</script>
<style scoped>

</style>